<template>
  <div class="yy-whp-out-in-manage">
    <!--列表-->
    <div class="yy-put-in-manage-list" v-show="type=='list'">
      <Card>
        <p slot="title">
          <Icon type="md-list" />
          出库管理列表
        </p>
        <Form ref="formInline" :model="formSearch"  inline>
            <FormItem prop="user">
              <Input type="text" v-model="formSearch.orderNum" placeholder="出库单号"></Input>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" placeholder="请选择仓库" v-model="formSearch.storageNum">
                 <Option value="0">全部</Option>
                 <Option v-for="(dataSt,index) in dataStorage" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}
                 </Option>
              </Select>
            </FormItem>
           <FormItem prop="user">
              <Select class="select" placeholder="请选择出库类型" v-model="formSearch.inType">
                <Option value="">请选择</Option>
                <Option v-for="(generateOut,index) in generateOutTypeArr" :value="generateOut.outTypeName" :key="index">
                  {{generateOut.outTypeName}}
                </Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <Select class="select" placeholder="请选择审核状态" v-model="formSearch.auditStatus">
                <Option value="0">全部</Option>
                <Option value="1">待审核</Option>
                <Option value="2">已审核</Option>
              </Select>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="出库起始时间" style="width: 200px"  v-model="formSearch.st" :options="startTimeOption" @on-change="onStartTimeChange"></DatePicker>
            </FormItem>
            <FormItem prop="user">
              <DatePicker type="date" placeholder="出库结束时间" style="width: 200px" v-model="formSearch.et" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSearch()">查询</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleReceive()">领用出库</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleOutAllot()">调拨出库</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handlePrint()">打印</Button>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleExecl()">导出</Button>
            </FormItem>
        </Form>
        <Table :columns="columns" :data="data" ></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
          </div>
        </div>
      </Card>
    </div>

    <!--详情-->
    <div class="yy-put-in-manage-details" v-show="type=='details' || type=='audit'">
       <Card>
        <p slot="title">
          <template v-if="type=='details'"> 
            <Icon type="md-paper"/>查看详情
          </template>
          <template v-if="type=='audit'"> 
            <Icon type="md-paper"/>管理员审核
          </template>
        </p>
        <p slot="extra">
          <Button type="primary" @click="handlePrint()" style="margin-right:10px">打印</Button>
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <div class="details">
          <p class="details-title"><span>出库单号:</span>{{currentData.orderNum}}</p>
          <p class="details-title"><span>出库类型:</span>{{currentData.outType}}</p>
          <p class="details-title"><span>材料员名称:</span>{{currentData.supName}}</p>
          <p class="details-title"><span>材料员电话:</span>{{currentData.phone}}</p>
          <p class="details-title"><span>创建日期:</span>{{currentData.createTime}}</p>
          <p class="details-title"><span>审核日期:</span>{{currentData.auditTime}}</p>
          <p class="details-title"><span>制单人:</span>{{currentData.createUserName}}</p>
          <p class="details-title"><span>备注:</span>{{currentData.remark}}</p>
          <p class="details-title"><span>物品列表:</span></p>
        </div>
        <Divider>物品列表</Divider>
        <Table :columns="columnsDetailsList" :data="detailsList" height=200 ></Table>
        <Form :model="auditSearch" v-if="type=='audit'">
          <FormItem label="审核备注" prop="user">
            <Input type="textarea" :autosize="{minRows: 2,maxRows: 10}" v-model="auditSearch.auditremark" placeholder="备注" maxlength="50"></Input>
          </FormItem>
          <FormItem prop="user" align="right" style="margin-right: 70px">
            <Button @click="handleAudit" type="primary" class="button">审核</Button>
          </FormItem>
        </Form>
      </Card>
    </div>

    <!--添加-->
    <div class="yy-put-in-manage-add-edit"  v-show="(type=='receive' || type=='outAllot')">
      <Card>
        <p slot="title">
          <template v-if="type=='receive'"> 
            <Icon type="md-create"/>领用出库清单
          </template>
          <template v-if="type=='outAllot'">
            <Icon type="md-document"/>调拨出库清单
          </template>
        </p>
        <p slot="extra" >
          <Button type="primary" @click="goBack()">返回</Button>
        </p>        
        <div class="postForm">
          <Form ref="formInlineA" :model="formSearch"  inline>
            <FormItem>
              <template v-if="type=='receive'"> 
                <Button type="primary" @click="handleReceiveGoods()">添加出库物品</Button>
              </template>
              <template v-if="type=='outAllot'">
                <Button type="primary" @click="handleOutAllotGoods()">添加出库物品</Button>
              </template>
            </FormItem>
          </Form>
          <Divider> 出库物品 </Divider>
          <Table :columns="columnsA" :data="dataA" height=200 ></Table>
          <div class="editForm">
            
            <div v-show="type=='receive'">
              <Form ref="formReceiveOutInList" :model="formReceiveOutInList" :label-width="120" :rules="checkReceiveFormOutInList" @keydown.native.enter.prevent ="createOutInList">
                <FormItem label="制单人"  prop="single">
                  <Input type="text" v-model="formReceiveOutInList.single" class="inputWidth" placeholder="请输入制单人"></Input>
                </FormItem>
                <FormItem label="制单时间"  prop="time">
                  <DatePicker type="date" placeholder="制单时间" class="inputWidth" v-model="formReceiveOutInList.time" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
                </FormItem>
                <FormItem>
                  <Button @click="createOutInList" type="primary" class="button">提交</Button>
                  <Button type="primary" class="button" @click="goBack()">取消</Button>
                </FormItem>
              </Form>
            </div>

            <div v-show="type=='outAllot'">
              <Form ref="formAllotOutInList" :model="formAllotOutInList" :label-width="120" :rules="checkAllotFormOutInList" @keydown.native.enter.prevent ="createOutInList">
                <FormItem label="调拨去向仓库"  prop="wdepaid">
                  <Select class="select" v-model="formAllotOutInList.wdepaid" placeholder="请选择调拨去向仓库" @on-change="changeStorage(formAllotOutInList.wdepaid)">
                    <Option value="">请选择</Option>
                    <Option v-for="(dataSt,index) in dataStorage" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="调拨去向库区" prop="depaid">
                  <Select class="select" placeholder="请选择库区" v-model="formAllotOutInList.depaid" >
                    <Option value="">请选择</Option>
                    <Option v-for="(dataLt,index) in dataLoctions" :value="dataLt.localNum" :key="index">{{dataLt.localName}}</Option>
                  </Select>
                </FormItem>
                <FormItem label="制单人"  prop="single">
                  <Input type="text" v-model="formAllotOutInList.single" class="inputWidth" placeholder="请输入制单人"></Input>
                </FormItem>
                <FormItem label="制单时间"  prop="time">
                  <DatePicker type="date" placeholder="制单时间" class="inputWidth" v-model="formAllotOutInList.time" :options="endTimeOption" @on-change="onEndTimeChange"></DatePicker>
                </FormItem>
                <FormItem>
                  <Button @click="createOutInList" type="primary" class="button">提交</Button>
                  <Button type="primary" class="button" @click="goBack()">取消</Button>
                </FormItem>
              </Form>
            </div>

          </div>
        </div>
      </Card>
    </div>

    <!--领用物品-->
    <Modal
      v-model="modalOutIn"
      transfer=false
      @on-ok="ok"
      @on-cancel="cancel"
      width="1000"
      scrollable=true
      footer-hide=true
      >
      <p slot="header">
        领用出库物品
      </p>
      <div class="modalReceiveGoods">
        <Form ref="formInline" :model="formSearch"  inline>
          <FormItem prop="depaid" v-show="this.access!=='wash'">
            <Select class="select" v-model="formSearch.wdepaid" placeholder="请选择出库仓库" @on-change="changeStorage(formSearch.wdepaid)">
              <Option value="">请选择</Option>
              <Option v-for="(dataSt,index) in dataStorage" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择库区" v-model="formSearch.depaid">
              <Option value="">请选择</Option>
              <Option v-for="(dataLt,index) in dataLoctions" :value="dataLt.localNum" :key="index">{{dataLt.localName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.supplierName" placeholder="物品类别名称"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择物品分类" v-model="formSearch.depaid">
              <Option v-for="(dataSt,index) in dataCateName" :value="dataSt.cateName" :key="index">
                {{dataSt.cateName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>
          </FormItem>
        </Form>
        <Table :columns="columnsB" :data="dataB" size="small"></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="pageB.total" :page-size="pageB.pageSize" :current="1" @on-change="changePageB" show-total></Page>
          </div>
        </div>
        <Divider>已添加物品列表</Divider>
        <div class="modalReceiveGoodsEdit">
          <CheckboxGroup v-model="checkReceiveGroup">
            <div class="modal-item" v-for="(good,index) in selectReceiveGoodsList" :key="good.itemNum">
              <div class="modal-inline-a">
                <Checkbox :label="good.itemNum" :disabled="good.isChecked"><span></span></Checkbox> 
              </div>
              <div class="modal-inline-b">
                <span class="modal-item-unit"><span class="modal-title">危化品名称:</span>{{good.itemName}}</span>
                <span class="modal-item-unit"><span class="modal-title">whp编号:</span>{{good.itemNum}}</span>
                <span class="modal-item-unit"><span class="modal-title">仓库名称:</span>{{good.storageName}}</span>
                <span class="modal-item-unit"><span class="modal-title">库区编号:</span>{{good.localName}}</span>
                <span class="modal-item-unit"><span class="modal-title">类型名称:</span>{{good.cateName}}</span>
                <span class="modal-item-unit"><span class="modal-title">规格型号:</span>{{good.size}}</span>
                <span class="modal-item-unit"><span class="modal-title">纯度:</span>{{good.isSpare ? "是" : "否"}}</span>
                <span class="modal-item-unit"><span class="modal-title">单位:</span>{{good.unitName}}</span>
                <span class="modal-item-unit"><span class="modal-title">质保期:</span>{{good.maintainDate}}</span>
                <span class="modal-item-unit"><span class="modal-title">剩余数量:</span>{{good.num}}</span>
                <span class="modal-item-unit"><span class="modal-title">品质:</span>{{good.batchNum}}</span>
                <span class="modal-item-unit"><span class="modal-title">总金额:</span>{{good.totalPrice}}</span>
                <Form :model="good" inline>
                  <FormItem prop="surplusNum">
                    <label class="require-input">*</label><InputNumber :min="0" :max="good.num" placeholder="数量" @on-change="listenReceiveInput(index,good)" v-model="good.surplusNum"></InputNumber>
                  </FormItem>
                  <FormItem prop="unitPrice">
                    <label class="require-input">*</label><InputNumber :min="0" step="0.1" precision="2" v-model="good.unitPrice" placeholder="单价" @on-change="listenReceiveInput(index,good)"></InputNumber>
                  </FormItem>
                  <FormItem prop="workOrder">
                    <Select class="select" v-model="good.workOrder" placeholder="请选择工单号">
                      <Option value="0">请选择</Option>
                      <Option v-for="(workOr,index) in workOrder" :value="workOr.workOrderNum" :key="index">{{workOr.workOrderName}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem prop="area">
                    <Select class="select" v-model="good.department" placeholder="请选择部门">
                      <Option value="0">请选择</Option>
                      <Option v-for="(dep,index) in department" :value="dep.departmentNum" :key="index">{{dep.departmentName}}</Option>
                    </Select>
                  </FormItem>
                  <FormItem prop="remark">
                    <Input class="remark" type="text" v-model="good.remark" placeholder="备注"></Input>
                  </FormItem>
                </Form>
              </div>
              <div class="modal-inline-c">
                <Button type="error" @click="deleteReceiveGoodsList(index,good)">删除</Button>
              </div>
            </div>
          </CheckboxGroup>
        </div>
        <div class="modal-post">
          <Button @click="handleAddReceiveCheckList()" type="primary" class="button">确认勾选</Button>
        </div>        
      </div>
    </Modal>

     <!--调拨出库-->
    <Modal
      v-model="modalAllotOutIn"
      transfer=false
      @on-ok="ok"
      @on-cancel="cancel"
      width="1000"
      scrollable=true
      footer-hide=true
      >
      <p slot="header">
        调拨出库物品
      </p>
      <div class="modalReceiveGoods">
        <Form ref="formInline" :model="formSearch"  inline>
          <FormItem prop="depaid" v-show="this.access!=='wash'">
            <Select class="select" v-model="formSearch.wdepaid" placeholder="请选择出库仓库" @on-change="changeStorage(formSearch.wdepaid)">
              <Option value="">请选择</Option>
              <Option v-for="(dataSt,index) in dataStorage" :value="dataSt.storageNum" :key="index">{{dataSt.storageName}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择库区" v-model="formSearch.depaid">
              <Option value="">请选择</Option>
              <Option v-for="(dataLt,index) in dataLoctions" :value="dataLt.localNum" :key="index">{{dataLt.localName}}</Option>  
            </Select>
          </FormItem>
          <FormItem prop="user">
            <Input type="text" v-model="formSearch.supplierName" placeholder="物品类别名称"></Input>
          </FormItem>
          <FormItem prop="user">
            <Select class="select" placeholder="请选择物品分类" v-model="formSearch.depaid">
              <Option v-for="(dataSt,index) in dataCateName" :value="dataSt.cateName" :key="index">
                {{dataSt.cateName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch()">查询</Button>
          </FormItem>
        </Form>
        <Table :columns="columnsC" :data="dataC" size="small"></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="pageC.total" :page-size="pageC.pageSize" :current="1" @on-change="changePageC" show-total></Page>
          </div>
        </div>
        <Divider>已添加物品列表</Divider>
        <div class="modalAllotGoodsEdit">
          <CheckboxGroup v-model="checkAllotGroup">
            <div class="modal-item" v-for="(good,index) in selectAllotGoodsList" :key="good.itemNum">
              <div class="modal-inline-a">
                <Checkbox :label="good.itemNum" :disabled="good.isChecked"><span></span></Checkbox> 
              </div>
              <div class="modal-inline-b">
                <span class="modal-item-unit"><span class="modal-title">化学品名称:</span>{{good.itemName}}</span>
                <span class="modal-item-unit"><span class="modal-title">化学品编号:</span>{{good.itemNum}}</span>
                <span class="modal-item-unit"><span class="modal-title">仓库名称:</span>{{good.storageName}}</span>
                <span class="modal-item-unit"><span class="modal-title">库区编号:</span>{{good.localName}}</span>
                <span class="modal-item-unit"><span class="modal-title">类型名称:</span>{{good.cateName}}</span>
                <span class="modal-item-unit"><span class="modal-title">规格型号:</span>{{good.size}}</span>
                <span class="modal-item-unit"><span class="modal-title">纯度:</span>{{good.isSpare ? "是" : "否"}}</span>
                <span class="modal-item-unit"><span class="modal-title">单位:</span>{{good.unitName}}</span>
                <span class="modal-item-unit"><span class="modal-title">质保期:</span>{{good.maintainDate}}</span>
                <span class="modal-item-unit"><span class="modal-title">剩余数量:</span>{{good.num}}</span>
                <span class="modal-item-unit"><span class="modal-title">品质:</span>{{good.batchNum}}</span>
                <span class="modal-item-unit"><span class="modal-title">总金额:</span>{{good.totalPrice}}</span>
                <Form :model="good" inline>
                  <FormItem prop="surplusNum">
                    <label class="require-input">*</label><InputNumber :min="0" :max="good.num" placeholder="数量" @on-change="listenAllotInput(index,good)" v-model="good.surplusNum"></InputNumber>
                  </FormItem>
                  <FormItem prop="unitPrice">
                    <label class="require-input">*</label><InputNumber :min="0" step="0.1" precision="2" v-model="good.unitPrice" placeholder="单价" @on-change="listenAllotInput(index,good)"></InputNumber>
                  </FormItem>
                  <FormItem prop="remark">
                    <Input class="remark" type="text" v-model="good.remark" placeholder="备注"></Input>
                  </FormItem>
                </Form>
              </div>
              <div class="modal-inline-c">
                <Button type="error" @click="deleteAllotGoodsList(index,good)">删除</Button>
              </div>
            </div>
          </CheckboxGroup>
        </div>
        <div class="modal-post">
          <Button @click="handleAddAllotCheckList()" type="primary" class="button">确认勾选</Button>
        </div>        
      </div>
    </Modal>

    <!--打印材料入库清单 Bill of Materials-->
    <div class="yy-out-in-manage-details" v-show="type=='billMaterials'">
       <Card>
        <p slot="title">
          <Icon type="md-paper"/>
          材料{{orderReport}}单
        </p>
        <p slot="extra">
          <Button type="primary" @click="handlePrint()" style="margin-right:10px">打印</Button>
          <Button type="primary" @click="goBack()">返回</Button>
        </p>
        <billMaterials :type="1" :dataType = generateOutTypeArr ref="child"></billMaterials>
      </Card>
    </div>

  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import billMaterials from "../common/bill-materials/bill-materials";
import mixin from "@/mixin/date-mixin";
import wareHouseMixin from "../common/warehouse-mixin";

export default {
  name: "yy-whp-out-in-manage",
  mixins: [mixin, wareHouseMixin],
  components: {
    billMaterials
  },
  data() {
    return {
      i18n: i18n,
      currentData: "",
      modalOutIn: false,
      modalAllotOutIn: false,
      orderReport: "",
      endTimeOption: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      type: "list",
      page: {
        total: 0,
        pageSize: 20
      },
      pageB: {
        total: 0,
        pageSize: 20
      },
      pageC: {
        total: 0,
        pageSize: 20
      },
      auditSearch: {
        auditState: 1,
        auditTime: "",
        auditremark: ""
      },
      formSearch: {
        st: "",
        et: "",
        orderNum: "",
        outType: "",
        storageNum: "",
        userID: "",
        userName: "",
        b_UserRole: ""
      },
      formSearchB: {},
      formSearchC: {},
      formReceiveOutInList: {
        single: "",
        time: ""
      },
      checkReceiveFormOutInList: {
        single: ValidatorRule.require,
        time: ValidatorRule.date
      },
      formAllotOutInList: {
        single: "",
        time: "",
        wdepaid: "",
        depaid: ""
      },
      checkAllotFormOutInList: {
        single: ValidatorRule.require,
        time: ValidatorRule.date,
        wdepaid: ValidatorRule.select,
        depaid: ValidatorRule.select
      },
      columns: [
        {
          title: "出库单号",
          key: "orderNum",
          render: (h, params) => {
            const row = params.row;
            return h(
              "span",
              {
                class: {
                  "td-click": true
                },
                on: {
                  click: () => {
                    this.handleBillMaterials(params.index);
                  }
                }
              },
              row.orderNum
            );
          }
        },
        {
          title: "出库类型 ",
          key: "outType",
          render: (h, params) => {
            return h("span", this.generateOutType(params.row.outType));
          }
        },
        {
          title: "材料员名称",
          key: "cusName"
        },
        {
          title: "材料员电话 ",
          key: "phone"
        },
        {
          title: "创建日期",
          key: "createTime"
        },
        {
          title: "审核日期",
          key: "auditTime"
        },
        {
          title: "制单人",
          key: "createUserName"
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            return h("span", params.row.status == 1 ? "待审核" : "已审核");
          }
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            let viewAction = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.details(params.index);
                  }
                }
              },
              "查看"
            );

            let deleteAction = h(
              "Button",
              {
                props: {
                  type: "error",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.delete(params.index, params.row.id);
                  }
                }
              },
              "删除"
            );

            let repealAction = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.repeal(params.index, params.row.id);
                  }
                }
              },
              "撤销"
            );

            let checkingAction = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.checking(params.index, params.row.id);
                  }
                }
              },
              "审核"
            );
            //根据角色判断操作按钮的显示
            let arr = [viewAction, deleteAction, checkingAction];
            return h("div", arr);
          }
        }
      ],
      data: [],
      columnsA: [
        {
          title: "物品编号",
          key: "itemNum"
        },
        {
          title: "物品名称",
          key: "itemName"
        },
        {
          title: "规格型号",
          key: "size"
        },
        {
          title: "单位",
          key: "unitName"
        },
        {
          title: "数量",
          key: "surplusNum"
        },
        {
          title: "出库单价",
          key: "unitPrice"
        },
        {
          title: "仓库",
          key: "storageName"
        },
        {
          title: "库区",
          key: "localName"
        },
        {
          title: "品质",
          key: "batchNum"
        },
        {
          title: "工单号",
          key: "workOrder"
        },
        {
          title: "部门",
          key: "department"
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "操作",
          key: "action",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteOutInGoods(params.index, params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      dataA: [],
      columnsB: [
        {
          title: "化学品编码",
          key: "itemNum"
        },
        {
          title: "化学品名称",
          key: "itemName"
        },
        {
          title: "仓库",
          key: "storageName"
        },
        {
          title: "库区",
          key: "localName"
        },
        {
          title: "类型名称",
          key: "cateName"
        },
        {
          title: "规格型号",
          key: "size"
        },
        {
          title: "纯度",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare ? "是" : "否");
          }
        },
        {
          title: "剩余数量",
          key: "num"
        },
        {
          title: "供应商",
          key: "num"
        },
        {
          title: "操作",
          key: "action",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "md-cart",
                    size: "20",
                    color: "#5158d4"
                  },
                  style: {
                    marginRight: "5px",
                    cursor: "pointer"
                  },
                  on: {
                    click: () => {
                      this.addReceiveGoods(params.row);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],
      dataB: [],
      columnsC: [
        {
          title: "化学品编码",
          key: "itemNum"
        },
        {
          title: "化学品名称",
          key: "itemName"
        },
        {
          title: "仓库",
          key: "storageName"
        },
        {
          title: "库区",
          key: "localName"
        },
        {
          title: "分类名称",
          key: "cateName"
        },
        {
          title: "规格型号",
          key: "size"
        },
        {
          title: "纯度",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare ? "是" : "否");
          }
        },
        {
          title: "剩余数量",
          key: "num"
        },
        {
          title: "供应商",
          key: "num"
        },
        {
          title: "操作",
          key: "action",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "md-cart",
                    size: "20",
                    color: "#5158d4"
                  },
                  style: {
                    marginRight: "5px",
                    cursor: "pointer"
                  },
                  on: {
                    click: () => {
                      this.addAllotGoods(params.row);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],
      dataC: [],
      selectGoodsList: [],
      dataCateName: [],
      generateOutTypeArr: [],
      columnsDetailsList: [
        {
          title: "物品编号",
          key: "itemNum"
        },
        {
          title: "物品名称",
          key: "itemName"
        },
        {
          title: "规格型号",
          key: "size"
        },
        {
          title: "物品序列号",
          key: "sn"
        },

        {
          title: "单位",
          key: "unitName"
        },
        {
          title: "数量",
          key: "num"
        },
        {
          title: "出库单价",
          key: "outPrice"
        },
        {
          title: "是否耐用",
          key: "isSpare",
          render: (h, params) => {
            return h("span", params.row.isSpare ? "是" : "否");
          }
        },
        {
          title: "库区",
          key: "localName"
        },
        {
          title: "品质",
          key: "batchNum"
        },
        {
          title: "质保期",
          key: "maintainDate"
        },
        {
          title: "工单号",
          key: ""
        },
        {
          title: "部门",
          key: ""
        },
        {
          title: "备注",
          key: "outMemo"
        }
      ],
      detailsList: [],
      selectReceiveGoodsList: [],
      checkReceiveGroup: [],
      checkAllotGroup: [],
      selectAllotGoodsList: [],
      workOrder: [],
      department: []
    };
  },

  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.initCateList();
    this.initOutType();
    this.handleSearch();
  },

  computed: {},

  methods: {
    initCateList() {
      let obj = {
        hasLocation: 1
      };
      this.getCateNameList(obj);
    },

    getCateNameList(obj) {
      API.getCateNameList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataCate = res.data;
            this.dataCateName = dataCate.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    initOutType() {
      let obj = {};
      this.getOutTypeList(obj);
    },

    getOutTypeList(obj) {
      API.getOutTypeList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.generateOutTypeArr = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleSearch() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      obj.pageSize = this.page.pageSize;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.page.total = data.total;
            this.page.pageSize = data.pageSize;
            this.data = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    changePage(pageNum) {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    changePageB(pageNum) {
      let obj = this.formSearchB,
        maxPageNum = Math.ceil(this.pageB.total / this.pageB.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearchB = obj;
      this.getReceiveGoodsList(obj);
    },

    changePageC(pageNum) {
      let obj = this.formSearchC,
        maxPageNum = Math.ceil(this.pageC.total / this.pageC.pageSize);
      if (obj.pageNum > maxPageNum) {
        obj.pageNum = maxPageNum;
      } else {
        obj.pageNum = pageNum;
      }
      this.formSearchC = obj;
      this.getAllotGoodsList(obj);
    },

    goBack() {
      this.type = "list";
    },

    handleReceive() {
      this.type = "receive";
      this.$refs.formReceiveOutInList.resetFields();
      this.dataA = [];
      this.formReceiveOutInList.single = this.userInfo.userName;
      this.formReceiveOutInList.time = new Date();
    },

    handleOutAllot() {
      this.type = "outAllot";
      this.$refs.formAllotOutInList.resetFields();
      this.dataA = [];
      this.formAllotOutInList.single = this.userInfo.userName;
      this.formAllotOutInList.time = new Date();
    },

    details(index) {
      this.type = "details";
      this.currentData = _.clone(this.data[index]);
      this.currentData.outType = _.clone(
        this.generateOutTypeArr[this.currentData.outType - 1].outTypeName
      );
      let obj = {
        orderNum: this.data[index].orderNum,
        userID: "",
        userName: "",
        b_UserRole: ""
      };
      this.getDetailsList(obj);
    },

    getDetailsList(obj) {
      API.getDetailsList(obj)
        .then(res => {
          if (res.code == 200) {
            let dataDet = res.data;
            this.detailsList = dataDet.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    delete(index, id) {
      let tthis = this;
      this.$Modal.confirm({
        title: "提示：",
        content: "你确定删除这条记录",
        onOk: function() {
          let obj = {
            ID: id,
            UserID: tthis.userInfo.userId
          };
          API.delete(obj)
            .then(res => {
              if (res.code == 200) {
                this.$Message.success({ content: "该记录已经删除成功！" });
                tthis.data.splice(index, 1);
                tthis.resetList();
              }
            })
            .catch(err => {
              console.log(err);
              this.$Message.error("请求异常！");
            });
        }
      });
    },

    resetList() {
      //求余为1，页码为最大页码，请求页需减1
      let maxPageNum = Math.ceil(this.page.total / this.page.pageSize);
      let remainderNum = this.page.total % this.page.pageSize;
      if (
        this.formSearch.pageNum == maxPageNum &&
        remainderNum == 1 &&
        this.formSearch.pageNum !== 1
      ) {
        this.formSearch.pageNum = this.formSearch.pageNum - 1;
      }
      let obj = this.formSearch;
      this.getList(obj);
    },

    checking(index) {
      this.details(index);
      this.type = "audit";
    },

    handleAudit() {
      let obj = this.auditSearch;
      obj.auditTime = new Date();
      this.audit(obj);
    },

    audit(obj) {
      API.audit(obj)
        .then(res => {
          if (res.code == 200) {
            this.$Message.success({ content: "该记录已经审核成功！" });
            this.type = "list";
            let obj = this.formSearch;
            this.getList(obj);
          }
        })
        .catch(err => {
          console.log(err);
          this.$Message.error("请求异常！");
        });
    },

    handleBillMaterials(index) {
      this.type = "billMaterials";
      this.currentData = this.data[index];
      this.orderReport = this.generateOutTypeArr[
        this.currentData.outType - 1
      ].outTypeName;
      this.$refs.child.orderDetails(this.currentData.orderNum);
    },

    generateOutType(index) {
      let outTypeValue = this.generateOutTypeArr[index - 1].outTypeName;
      return outTypeValue;
    },

    handleReceiveGoods() {
      this.modalOutIn = true;
      //this.dataB = [];
      this.checkReceiveGroup = [];
      this.selectReceiveGoodsList = [];
      if (this.dataB) {
        this.handleReceiveGoodsSearch();
      }
      this.getWorkOrder();
      this.getDepartment();
    },

    handleReceiveGoodsSearch() {
      let obj = this.formSearchB;
      obj.pageNum = 1;
      obj.pageSize = this.pageB.pageSize;
      obj.userID = this.userInfo.userId;
      obj.userName = this.userInfo.userName;
      obj.b_UserRole = this.userInfo.access;
      this.formSearchB = obj;
      this.getReceiveGoodsList(obj);
    },

    getReceiveGoodsList(obj) {
      API.getReceiveGoodsList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.pageB.total = data.total;
            this.pageB.pageSize = data.pageSize;
            this.dataB = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handleOutAllotGoods() {
      this.modalOutIn = false;
      this.modalAllotOutIn = true;
      //this.dataC = [];
      this.checkAllotGroup = [];
      this.selectAllotGoodsList = [];
      if (this.dataC) {
        this.handleAllotGoodsSearch();
      }
      this.getWorkOrder();
      this.getDepartment();
    },

    handleAllotGoodsSearch() {
      let obj = this.formSearchC;
      obj.pageNum = 1;
      obj.pageSize = this.pageC.pageSize;
      obj.userID = this.userInfo.userId;
      obj.userName = this.userInfo.userName;
      obj.b_UserRole = this.userInfo.access;
      this.formSearchC = obj;
      this.getAllotGoodsList(obj);
    },

    getAllotGoodsList(obj) {
      API.getReceiveGoodsList(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.pageC.total = data.total;
            this.pageC.pageSize = data.pageSize;
            this.dataC = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    addAllotGoods(obj) {
      let bool = false,
        gId = obj.itemNum,
        arr = this.selectAllotGoodsList;

      this.$set(obj, "isChecked", true);
      this.$set(obj, "totalPrice", 0);
      this.$set(obj, "unitPrice", 0);
      this.$set(obj, "surplusNum", 0);

      _.forEach(arr, function(value) {
        if (value.itemNum == gId) {
          bool = true;
        }
      });
      if (!bool) {
        arr.push(obj);
      } else {
        this.$Message.warning("该物品已经添加过了");
      }
      this.selectAllotGoodsList = arr;
    },

    addReceiveGoods(obj) {
      let bool = false,
        gId = obj.itemNum,
        arr = this.selectReceiveGoodsList;

      this.$set(obj, "isChecked", true);
      this.$set(obj, "totalPrice", 0);
      this.$set(obj, "unitPrice", 0);
      this.$set(obj, "surplusNum", 0);
      this.$set(obj, "department", "");
      this.$set(obj, "workOrder", "");

      _.forEach(arr, function(value) {
        if (value.itemNum == gId) {
          bool = true;
        }
      });
      if (!bool) {
        arr.push(obj);
      } else {
        this.$Message.warning("该物品已经添加过了");
      }
      this.selectReceiveGoodsList = arr;
    },

    listenAllotInput(index, obj) {
      if (obj.surplusNum && obj.unitPrice) {
        obj.totalPrice = obj.surplusNum * obj.unitPrice;
        this.selectAllotGoodsList[index] = obj;
      }
      if (obj.surplusNum && obj.unitPrice) {
        if (_.indexOf(this.checkAllotGroup, obj.itemNum) < 0) {
          this.checkAllotGroup.push(obj.itemNum);
          this.selectAllotGoodsList[index].isChecked = false;
        }
      } else {
        let tthis = this;
        _.forEach(this.checkAllotGroup, function(value, key) {
          if (value == obj.itemNum) {
            tthis.checkAllotGroup.splice(key, 1);
          }
        });
        this.selectAllotGoodsList[index].isChecked = true;
      }
    },

    listenReceiveInput(index, obj) {
      if (obj.surplusNum && obj.unitPrice) {
        obj.totalPrice = obj.surplusNum * obj.unitPrice;
        this.selectReceiveGoodsList[index] = obj;
      }
      if (obj.surplusNum && obj.unitPrice) {
        if (_.indexOf(this.checkReceiveGroup, obj.itemNum) < 0) {
          this.checkReceiveGroup.push(obj.itemNum);
          this.selectReceiveGoodsList[index].isChecked = false;
        }
      } else {
        let tthis = this;
        _.forEach(this.checkReceiveGroup, function(value, key) {
          if (value == obj.itemNum) {
            tthis.checkReceiveGroup.splice(key, 1);
          }
        });
        this.selectReceiveGoodsList[index].isChecked = true;
      }
    },

    deleteAllotGoodsList(index, good) {
      let tthis = this;
      this.$Modal.confirm({
        title: "提示：",
        content: "你确定删除?",
        onOk: function() {
          _.forEach(tthis.checkAllotGroup, function(value, key) {
            if (value == good.itemNum) {
              tthis.checkAllotGroup.splice(key, 1);
            }
          });
          tthis.selectAllotGoodsList.splice(index, 1);
        }
      });
    },

    deleteReceiveGoodsList(index, good) {
      let tthis = this;
      this.$Modal.confirm({
        title: "提示：",
        content: "你确定删除?",
        onOk: function() {
          _.forEach(tthis.checkReceiveGroup, function(value, key) {
            if (value == good.itemNum) {
              tthis.checkReceiveGroup.splice(key, 1);
            }
          });
          tthis.selectReceiveGoodsList.splice(index, 1);
        }
      });
    },

    handleAddAllotCheckList() {
      let arr = this.checkAllotGroup;
      if (arr.length > 0) {
        for (let i in arr) {
          let obj = _.find(this.selectAllotGoodsList, function(o) {
            return o.itemNum == arr[i];
          });
          this.dataA.push(obj);
        }
        this.modalAllotOutIn = false;
        console.log("确认勾选！", this.dataA);
      } else {
        this.$Message.warning("请选择出库的物品.");
      }
    },

    handleAddReceiveCheckList() {
      let arr = this.checkReceiveGroup;
      console.log(this.selectReceiveGoodsList, arr);
      if (arr.length > 0) {
        for (let i in arr) {
          let obj = _.find(this.selectReceiveGoodsList, function(o) {
            return o.itemNum == arr[i];
          });
          this.dataA.push(obj);
        }
        this.modalOutIn = false;
        console.log("确认勾选！", this.dataA);
      } else {
        this.$Message.warning("请选择出库的物品.");
      }
    },

    deleteOutInGoods(index) {
      this.dataA.splice(index, 1);
    },

    createOutInList() {
      if (this.type == "receive") {
        this.$refs.formReceiveOutInList.validate(valid => {
          if (valid) {
            if (this.dataA.length > 0) {
              let obj = {
                list: this.dataA
                //todo 其他参数
              };
              API.saveOutInList(obj)
                .then(res => {
                  if (res.code == 200) {
                    this.$Message.success("添加成功！");
                    //提交以后重置表单
                    this.$refs.formReceiveOutInList.resetFields();
                    this.dataA = [];
                    this.dataB = [];
                    this.formReceiveOutInList.single = this.userInfo.userName;
                    this.formReceiveOutInList.time = new Date();
                    this.type = "list";
                    this.getList(this.formSearch);
                  }
                })
                .catch(err => {
                  this.$Message.error("请求异常！");
                });
            } else {
              this.$Message.warning("请选择出货的物品.");
            }
          }
        });
      }

      if (this.type == "outAllot") {
        this.$refs.formAllotOutInList.validate(valid => {
          if (valid) {
            if (this.dataA.length > 0) {
              let obj = {
                list: this.dataA
                //todo 其他参数
              };
              API.saveOutInList(obj)
                .then(res => {
                  if (res.code == 200) {
                    this.$Message.success("添加成功！");
                    //提交以后重置表单
                    this.$refs.formReceiveOutInList.resetFields();
                    this.dataA = [];
                    this.dataC = [];
                    this.formOutInList.single = this.userInfo.userName;
                    this.formOutInList.time = new Date();
                    this.type = "list";
                    this.getList(this.formSearch);
                  }
                })
                .catch(err => {
                  this.$Message.error("请求异常！");
                });
            } else {
              this.$Message.warning("请选择出货的物品.");
            }
          } else {
            this.$Message.warning("请选择填写完清单.");
          }
        });
      }
    },

    getWorkOrder() {
      let obj = {};
      API.getWorkOrder(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.workOrder = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    getDepartment() {
      let obj = {};
      API.getDepartment(obj)
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.department = data.list;
          }
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    handlePrint() {
      window.print();
    },

    handleExecl() {
      alert("后台直接导出EXECL文件！");
    }
  }
};
</script>
<style lang="less" >
@import "./yy-whp-out-in-manage.less";
</style>
